<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>优达学城站点标题</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
  
<!-- TODO: 这个标题用了错误的颜色！文字颜色应该是：#697681 --> 
<!-- TODO: 标题文字应该再粗一些，请将字体粗细设置为 400。-->
<!-- TODO: 标题的 logo 似乎占据了太多空间。你可以将宽度限制为 200px吗？ -->
<!-- TODO: 主体部分的背景色似乎不太合适，请将背景色改为 #ddd。 -->
  
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      font-family: 'Open Sans', sans-serif;
      margin: 0;
      padding: 0;
    }
    
    header {
      font-weight: 400;
      color: #697681;
      background: #ddd;
      -webkit-font-smoothing: antialiased;
      height: 85px;
      padding: 15px;
    }
    section {
      padding: 16px;
    }
    .flex-container {
      display: flex;
    }
    .space-between {
      justify-content: space-between;
    }
    .vertical-centerer {
      height: 100%;
      flex-direction: column;
      justify-content: center;
    }
    .header-content {
      width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
    .logo {
      width: 200px;
      display: inline-block;
      margin: 10px 0px;
    }
    .menu {
      list-style: none;
      list-style-type: none;
    }
    .menu > li {
      display: inline;
      margin-left: 37.5px;
    }
  </style>
</head>
<body>
  <header>
    <div class="vertical-centerer flex-container">
      <div class="flex-container space-between header-content">
        <div>
          <span>
            <img class="logo" src="Udacity_Logo_SVG_200x35.svg" alt="Udacity Logo">
          </span>
        </div>
        <div>
          <ul class="menu">
            <li>纳米学位</li>
            <li>选课指南</li>
            <li>我的教室</li>
          </ul>
        </div>
      </div>
    </div>
  </header>
  <section>
    <p>呃，这个标题看上去有些奇怪。</p>

    <p>
      你需要在 workspace 中编辑并更改这个网站，使标题看上去更加顺眼。
    </p>
  </section>
</body>
</html>
